<template>
  <div class="app-container">
    <div class="left-side dept-tree">
      <div class="search">
        <el-input v-model="search" placeholder="搜索组织名称" />
        <!-- <el-input placeholder="请输入姓名搜索" v-model="queryParams.realName" @keyup.enter.native="handleSearch" /> -->
      </div>
      <el-tree
        ref="tree"
        :data="orgs"
        :props="defaultProps"
        node-key="key"
        :highlight-current="true"
        :indent="15"
        :filter-node-method="filterNode"
        @node-click="nodeClick"
      >
        <template slot-scope="{ node, data }">
          <el-tooltip v-if="node.label.length > 11" effect="dark" :content="node.label" placement="top">
            <span class="text">{{ node.label }}</span>
          </el-tooltip>
          <span v-else class="text">{{ node.label }}</span>
        </template>
      </el-tree>
    </div>
    <div class="right-side">
      <h4 class="dpet-name-count">
        {{ departmentName || '全部人员' }}
        <em>【{{ pages.total }}】</em>
      </h4>
      <search-bar
        v-model="queryParams"
        :config="searchColumn"
        style="padding: 0 30px 10px 30px"
        @search="handleSearch"
        @searchReset="handleReset"
      />
      <table-page
        :table-data="tableData"
        :table-column="tableColumn"
        :is-index="false"
        :total="pages.total"
        :page-size="pages.pageSize"
        :current-page="pages.pageNum"
        @sizeChange="handleSizeChange"
        @currentChange="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getTreeList } from '@/api/org'
import { getEmployee } from '@/api/employee'
import TablePage from '@/components/TablePage'
import SearchBar from '@/components/SearchBar'

export default {
  name: 'Contact',
  components: { TablePage, SearchBar },
  data: function () {
    return {
      orgs: [],
      search: '',
      departmentId: '',
      departmentName: '',
      queryParams: {},
      searchColumn: [
        {
          prop: 'JobNum',
          type: 'input',
          placeholder: '工号'
        },
        {
          prop: 'IsOut',
          type: 'select',
          placeholder: '是否离职',
          options: [
            { label: '是', value: true },
            { label: '否', value: false }
          ]
        }
      ],
      tableData: [],
      tableColumn: [
        {
          label: '姓名',
          prop: 'realName'
        },
        {
          label: '工号',
          prop: 'jobNum'
        },
        {
          label: '职位',
          prop: 'jobName'
        },
        {
          label: '部门',
          prop: 'departmentName'
        },
        {
          label: '手机号',
          prop: 'mobile'
        },
        {
          label: '状态',
          prop: 'oaStatusName',
          width: 90
        },
        {
          label: '上级用户',
          prop: 'oaParentJobNum'
        },
        {
          label: '操作时间',
          prop: 'handleDate',
          width: 180
        }
      ],
      pages: {
        total: 0,
        pageNum: 1,
        pageSize: 10
      },
      defaultProps: {
        children: 'childs',
        label: 'value'
      }
    }
  },
  watch: {
    search(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getDeptList()
    this.getTableData()
  },
  methods: {
    getDeptList() {
      getTreeList().then((res) => {
        this.orgs = res
        // this.nodeClick(this.orgs[0])
      })
    },
    nodeClick({ key, value }) {
      this.departmentId = key
      this.departmentName = value
      this.getTableData()
    },
    getTableData() {
      const params = {
        skipCount: this.pages.pageNum,
        MaxResultCount: this.pages.pageSize,
        departmentId: this.departmentId,
        departmentName: this.departmentName,
        ...this.queryParams
      }
      getEmployee(params).then((res) => {
        this.tableData = res.items
        this.tableData = this.tableData.map((item) => {
          return { ...item, handleDate: item.modifyTime || item.createTime }
        })
        this.pages.total = res.totalCount
      })
    },
    handleSearch() {
      this.pages.pageSize = 10
      this.pages.pageNum = 1
      this.getTableData()
    },
    handleReset() {
      this.pages.pageNum = 1
      this.getTableData()
    },
    handleSizeChange(v) {
      this.pages.pageSize = v
      this.pages.pageNum = 1
      this.getTableData()
    },
    handleCurrentChange(v) {
      this.pages.pageNum = v
      this.getTableData()
    },
    filterNode(value, data) {
      if (!value) return true
      return data.value.indexOf(value) !== -1
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/mixin.scss';
.app-container {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 0;
  ::v-deep .left-side.dept-tree {
    width: 250px;
    height: 100%;
    margin-right: 21px;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    .search {
      width: 100%;
      height: 65px;
      padding: 15px;
      box-sizing: border-box;
    }
    .el-input input {
      height: 36px;
      background: #ffffff;
      border-radius: 2px;
      border: 1px solid #d9d9d9;
    }
    .el-tree {
      width: 100%;
      flex: 1;
      // padding: 0 15px;
      box-sizing: border-box;
      overflow: hidden;
      overflow-y: auto;
      .is-current {
        position: relative;
      }
      & > .el-tree-node > .el-tree-node__content {
        padding: 0 5px !important;
      }
      .el-tree-node__content {
        min-height: 45px;
        padding-right: 20px;
      }
      span.text {
        display: inline-block;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .el-tree-node__label {
        width: 100%;
        font-size: 14px;
        color: #333333;
        span.text {
          display: inline-block;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
  .right-side {
    flex: 1;
    height: 100%;
    background: #fff;
    overflow-y: auto;
    .dpet-name-count {
      padding: 0px 30px;
      box-sizing: border-box;
      font-size: 16px;
      color: #333333;
      line-height: 21px;
      em {
        font-style: normal;
        color: #0076ff;
      }
    }
  }
}
::v-deep .table-page .el-table th:first-child > .cell,
::v-deep .table-page .el-table td:first-child > .cell {
  padding-left: 30px;
}
</style>
